<template>
  <div class="box">
    <div class="top">
      <p class="title">男女比例</p>
      <p class="bg"></p>
    </div>
    <div class="people">
      <div class="p_left">
        <img src="../../images/man.png" alt="" srcset="" />
      </div>
      <div class="p_right">
        <img src="../../images/woman.png" alt="" srcset="" />
      </div>
    </div>
    <div class="p_bottom">
      <span>男50%</span>
      <span>女50%</span>
    </div>
    <div class="vs" ref="charts"></div>
  </div>
</template>

<script lang="ts" setup name="LeftMiddle">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
onMounted(() => {
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    yAxis: { show: false, type: 'category' },
    xAxis: { show: false },
    series: [
      {
        name: '男士比例',
        barWidth: 25,
        type: 'bar',
        data: [{ name: '男士比例', value: 50 }],
        color: 'skyblue',
        z: 99,
        itemStyle: { borderRadius: 15 },
      },
      {
        barWidth: '25px',
        type: 'bar',
        data: [100],
        barGap: '-100%',
        itemStyle: {
          color: 'pink',
          borderRadius: 20,
        },
      },
    ],
    grid: { left: 0, right: 0, top: 0, bottom: 0 },
  })
})
let charts = ref()
</script>
<style scoped lang="scss">
.box {
  padding: 5px 15px;
  color: white;
  display: flex;
  height: 100%;
  flex: 24;
  flex-direction: column;
  .top {
    flex: 4;
    .title {
      color: white;
      font-size: 20px;
      font-weight: bold;
    }
    .bg {
      height: 10px;
      margin-top: 5px;
      background: url('../../images/dataScreen-title.png') no-repeat left;
      background-size: left;
    }
  }
  .people {
    width: 100%;
    margin: 0px auto;
    padding-top: 10%;
    flex: 12;
    display: flex;
    justify-content: space-evenly;
    img {
      display: block;
      margin: 30px auto;
    }
    .p_left {
      background: url('../../images/man-bg.png') no-repeat;
      background-size: cover;
      height: 120px;
      width: 115px;
    }
    .p_right {
      height: 120px;
      width: 115px;
      background: url('../../images/woman-bg.png') no-repeat;
      background-size: cover;
    }
  }
  .p_bottom {
    flex: 3;
    display: flex;
    justify-content: space-evenly;
    span {
      padding: 5px;
    }
  }
  .vs {
    flex: 5;
    width: 80%;
    margin: 0px auto;
  }
}
</style>
